<div id="app">
    <section class="content-header">
        <h1>
            <small>商品规格参数设置</small>
        </h1>

    </section>

    <section class="content">
        <div class="row">
            <div class="col-md-12">
                <div class="box box-info">
                    <div class="box-header with-border">

                        <div class="box-tools">
                            <div class="btn-group pull-right" style="margin-right: 5px">
                                <a style="margin:0px 5px;" href="/admin/goods/goodsEdit?goods_id={{$goods['goods_id']}}" class="btn btn-sm btn-default" title="商品编辑"> <span class="hidden-xs">商品编辑</span></a>
                                <a style="margin:0px 5px;" href="/admin/goods/sku?goods_id={{$goods['goods_id']}}" class="btn btn-sm btn-default" title="属性"> <span class="hidden-xs">属性</span></a>
                                <a style="margin:0px 5px;" href="/admin/goods/goodsAddImg?goods_id={{$goods['goods_id']}}" class="btn btn-sm btn-default" title="图片"> <span class="hidden-xs">图片</span></a>
                                <a style="margin:0px 5px;" href="/admin/goods/goodsLease?goods_id={{$goods['goods_id']}}}" class="btn btn-sm btn-default" title="租期"> <span class="hidden-xs">租期</span></a>
                            </div>
                        </div>

                        <span>
    <a class="btn btn-sm btn-primary grid-refresh" title="刷新"><i class="fa fa-refresh"></i><span class="hidden-xs"> 刷新</span></a>
    <a class="btn btn-sm btn-primary" onclick="javascript:history.go(-1);" title="返回"> <span class="hidden-xs"> 返回</span></a>
  </span>

                    </div>

                    <div class="box-body table-responsive no-padding">
                        <table class="table table-hover" style="width:100%" >
                            <thead >
                            <tr>
                                <th colspan="3">商品名称：{{$goods['goods_name']}}</th>
                            </tr>
                            </thead>
                            @if($attr)
                                @foreach($attr as $v)
                                    <tr>
                                        <td  >
                                            参数名：<input type="text" value="{{$v['attr_spec_name']}}" class="spec_name{{$v['id']}}" style="padding-left:5px;border:1px solid #a6e1ec;height:40px;width:300px;"/>
                                        </td>
                                        <td  >
                                            参数值：<input type="text" value="{{$v['attr_spec_val']}}" class="spec_val{{$v['id']}}" style="padding-left:5px;border:1px solid #a6e1ec;height:40px;width:300px;"/>
                                        </td>
                                        <td  >
                                            <button class="attr_edit" style="border:0px solid #a6e1ec;background: #3b8ab8;color:white"  data-id="{{$v['id']}}"   >编辑</button>

                                            <button data-id="{{$v['id']}}"    class="attr_del">删除</button>
                                        </td>
                                    </tr>
                                @endforeach
                            @endif

                        </table>
                    </div>

                    <input data-id="0" data-goods="0" data-type="" type="file" style="display:none;" onchange="upimg(this)" name="img" id="upImg">

                    <!-- /.box-header -->
                    <!-- form start -->

                    <form id="addForm"  accept-charset="UTF-8" class="form-horizontal"  style="margin-top:30px;">
                        <div class="box-body">
                            <div id="attr-div" class="fields-group">
                                <div class="form-group  ">
                                    <label for="img" class="col-sm-2  control-label"></label>
                                    <div class="col-sm-8"  >
                                       参数名： <input type="text" name="name[]"  style="padding-left:5px;border:1px solid #a6e1ec;height:40px;width:300px;"  />
                                        参数值：<input type="text" name="val[]"   style="padding-left:5px;border:1px solid #a6e1ec;height:40px;width:300px;"   />

                                        <div onclick="zhuijia()" style="height:40px;line-height:40px;border-radius:5px;display:inline-block;width:50px;background: #3b8ab8;color:#f9f9f9;text-align:center;"> 追加 </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /.box-body -->

                        <div class="box-footer">
                            @csrf
                            <input type="hidden" name="goods_id" value="{{$goods['goods_id']}}">
                            <input type="hidden" name="action" value="add">
                            <div class="col-md-2">
                            </div>
                            <div class="col-md-8">
                                <div class="btn-group pull-right">
                                    <button type="button" onclick="tijiao()" class="btn btn-primary">添加</button>
                                </div>

                                <div class="btn-group pull-left">
                                    <button type="reset" class="btn btn-warning">重置</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>

            </div></div>
    </section>
</div>
<script data-exec-on-popstate>

    $(function(){
            //编辑参数
        $('.attr_edit').click(function(e){
            var id=$(this).attr('data-id');
            var name=$('.spec_name'+id).val();
            var zhi=$('.spec_val'+id).val();
                $.ajax({
                    url:'/admin/goods/goodsAttrEdit',
                    data:{id:id,_token:LA.token,name:name,zhi:zhi},
                    type:'post',
                    dataType:'json',
                    success:function (m) {
                        if(m.status==1){
                            toastr.success(m.message);
                        }else{
                            toastr.error(m.message);
                        }
                    }
                });
        });

        //删除参数
        $('.attr_del').click(function(e){
            var id=$(this).attr('data-id');
            var b=$(this);
            if(confirm('确定要删除吗？')){
                $.ajax({
                    url:'/admin/goods/goodsAttrDelete',
                    data:{id:id,_token:LA.token},
                    type:'post',
                    dataType:'json',
                    success:function (m) {
                        if(m.status==1){
                            toastr.success(m.message);
                            $(b).parent().parent().remove();
                        }else{
                            toastr.error(m.message);
                        }
                    }
                });
            }
        });

        //刷新
        $('.grid-refresh').on('click', function() {
            $.pjax.reload('#pjax-container');
            toastr.success('刷新成功 !');
        });
    });

    //追加
    function zhuijia(){
        $.ajax({
            url:'/admin/goods/attrHtml',
            type:'get',
            dataType:'json',
            success:function (m) {
                if(m.status==1){
                    $("#attr-div").append(m.data.html);
                }
            }
        });
    }

    function tijiao(){
        var data=new FormData($("#addForm")[0]);
        $.ajax({
            url:"/admin/goods/goodsAttr",
            type:'post',
            data:data,
            dataType:'json',
            processData: false,
            contentType: false,
            success:function(m){
                //toastr.error(m.message);
                if(m.status==1){
                    toastr.success(m.message);
                    window.location.reload();
                }else{
                    toastr.error(m.message);
                }
            }
        });
    }
</script>


